@import '../../../vendor/compass/index'

@include normalize

@include media

@include grid

.center 
    width: 1200px
    margin: 0 auto

.public-btn
    +size(234,48)
    color: #fff
    font-size: 17px
    line-height: 48px
    text-align: center
    background: #1a8fb6
    border-radius: 10px
    margin-bottom: 15px
    display: block
    margin: 0 auto

$bounced-color: #99cbe1 
.public-bounced
    display: none
    width: 570px
    position: fixed
    z-index: 40
    top: 50%
    left: 50%
    margin-top: -200px
    margin-left: -285px
    text-align: center
    overflow: hidden
    border: 4px solid #142444
    border-radius: 12px 
    background: #142444  
    h3
        width: 100%
        height: 70px
        color: #fff
        font-size: 25px
        font-weight: normal
        line-height: 70px
        text-align: center
        background: #142444
        position: relative
        a
            position: absolute
            top: -4px
            right: 24px
            z-index: 50
            display: inline-block
        .close
            +size(24,24)
    .bounced-form
        font-size: 16px
        background-color: #fff
        +padding(56,40,43,28)
        .col-8
            height: 48px
            line-height: 48px
            
        .col-16
            +padding(n,n,n,16)
            overflow: hidden
            text-align: left
            line-height: 48px
            border: 1px solid $bounced-color
            border-radius: 10px
            margin-bottom: 14px
            input
                +size(80%,n)
                +padding(n,20,n,n)
                border: none
            .message
                +size(20%,48)
                float: right
                background: $bounced-color
                background-image: url(../images/message.png)
                background-size: 36px 28px
                background-repeat: no-repeat
                background-position: center
        p
            font-size: 14px
            text-align: center
            color: $bounced-color
        a
            +margin(28,n,n,n)
.red-btn
    +padding(8,100)
    color: #fff
    font-size: 23px
    font-weight: normal
    text-align: center
    display: inline-block
    background: #fe5840
    border-radius: 10px
    
.redstar
    background-image: url(../images/redstar.png)
    background-size: 8px 8px
    background-repeat: no-repeat
    background-position: 28px 19px

.free-solve
    margin-top: -280px
    p
        margin-bottom: 12px

.logo-container
    a
        display: block
        color: #333
        font-size: 17px
        font-weight: bold
        line-height: 106px
        padding-left: 50px
        background-image: url(../images/logo.png)
        background-size: u(36) u(37)
        background-repeat: no-repeat
        background-position-y: center

.nosuccess-bigpic
    +size(100%,n)
    text-align: center
    background-image: url(../images/bigpic.jpg)
    background-size: cover
    background-repeat: no-repeat
    .nosuccess
        +padding(160,n,46,n)
        h1
            +padding(56,n,26,n)
            font-weight: normal
            background: rgba(255,255,255,0.38)
            font-size: 46px
            letter-spacing: 3px
            margin-bottom: 120px
            span
                font-size: 32px
        input
            border: none
            +size(460,n)
            +padding(16)
            border-radius: 10px  
        .appealbtn
            display: inline-block
            +size(234,48)
            color: #fff
            font-size: 17px
            line-height: 48px
            background: #1a8fb6
            border-radius: 10px                     

.line-decoration
    +size(100%,25)
    +margin(40,n)
    border-bottom: 2px solid #666464

.public-title
    +size(340,46)
    margin: 0 auto 
    text-align: center
    line-height: 46px
    font-size: 26px
    background-color: #fff
    border-bottom: 3px solid #142444
    &::after
        content: ''
        display: block
        width: 0
        height: 0
        border-top: 12px solid #142444
        border-left: 14px solid transparent
        border-right: 14px solid transparent
        margin: 0 auto
        

.taobao-container
    +padding(n,n,70,n)
    text-align: center
    img
        +size(970,n)
        +margin(80,n,60,n)
    

.complain-container
    +padding(45,n,60,n)
    background-color: #78c7e2
    background-image: url(../images/earth.png)
    background-repeat: no-repeat
    background-size: 1484px 156px
    background-position: center bottom
.complain-title
    color: #fff
    background: none
    border-bottom: 3px solid #fff
    &::after
        border-top: 12px solid #fff

.complain-circle
    margin-top: 20px
    text-align: center
    overflow: hidden
    h2
        +size(240,240)
        color: #fff
        float: left
        font-weight: normal
        padding-top: 84px
        padding-right: 26px
        border-radius: 120px
        margin-top: 88px
        margin-right: -90px
        background-color: #127494
        &:nth-of-type(2)
            float: right
            margin-right: 0
            padding-left: 76px
            background-color: #1b2f55
    .circle-big
        +size(400,400)
        +padding(90,70,n,70)
        float: left
        position: relative
        z-index: 20
        font-size: 17px
        text-align: left
        border-radius: 200px
        background-color: #fff
        border: 12px solid #127494
        &:nth-of-type(2)
            float: right
            margin-right: -90px
            border: 12px solid #1b2f55
        p
            margin-bottom: 30px
            font-size: 22px
            text-align: center
        ol span
            font-weight: bold
            line-height: 28px
.complain-btn
    display: inline-block
    margin-top: 30px
    background: none
    border: 3px solid #fff
    
    


.cooperation-title
    text-align: center
    font-weight: normal
    font-size: 19px
    line-height: 140px
.cooperation-container
    border-radius: 10px
    text-align: center
    overflow: hidden
    font-size: 15px
    background-color: #bddeea
    h3
        font-weight: normal
        font-size: 19px
    .cooperation-list
        +size(20%,n)
        float: left
        img
            +size(100%,n)
        &:nth-of-type(odd)
            h3
                margin-top: 50px
            p
                padding-top: 18px  
        &:nth-of-type(even)
            padding-top: 48px
            p
                +padding(18,n,48,n)
.cooperation-btn
    display: block
    margin: 50px auto

.price-title
    text-align: center
    font-size: 26px
    color: #fff
    +padding(30,n,120,n)
    background-color: #78c7e2
    p
        background: none
        font-size: 16px
        font-weight: normal
        border-bottom: 3px solid #fff
        &::after
            border-top: 12px solid #fff 

.cards-container
    +padding(n,100,20,100)
    overflow: hidden
    margin-top: -54px 
    padding-top: 8px  
.cards-small
    +size(29%,n)
    float: left
    text-align: center
    padding-bottom: 58px
    background-color: #c5dcea
    box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.5)
    &:nth-of-type(3)
        float: right
    h2
        color: #fff
        font-size: 20px
        line-height: 58px
        background-color: #086d8e
    img
        +size(140,140)
        +margin(50,n,30,n) 
    p
        font-size: 16px
    h3
        color: #6e1212
        font-size: 20px
        margin-top: 10px
        margin-bottom: 10px
        span
           font-size: 13px 
           font-weight: normal
.cards-big
    +size(31%,n)
    margin-top: -6px
    margin-left: 55px
    box-shadow: 4px 4px 4px 1px rgba(0,0,0,0.4)
    h2
        line-height: 64px
        background-color: #1b2f55
    img
        +size(152,152)
    a
        color: #6e1212
        display: inline-block
        padding-bottom: 3px
        border-bottom: 1px solid #ef6e30
        font-size: 12px
        span
            color: #ef6e30
            font-size: 14px

.service-container
    +size(100%,n)
    background-image: url(../images/keypress.jpg)
    background-size: cover
    background-repeat: no-repeat
    .chain
        text-align: center
        +padding(58,n)
        img
            +size(100%,n)
            +margin(150,n,110,n)


.more-container
    padding-top: 30px
    text-align: center
    .row
        margin-bottom: 10px
        a
            width: 86%
            color: #222
            font-size: 30px
            background-color: #bfd4f7
            display: inline-block
            +padding(32,n)
        &:nth-of-type(even)
            a
                background-color: #bfe1f7   
        &:last-child
            margin-bottom: 50px 

.footer-container
    margin-top: 50px
    +padding(60,n,90,60)
    background-color: #111823
.footer-center
    color: #c9caca
    .row
        h3 
            font-size: 18px
            margin-bottom: 20px
            font-weight: normal
            span
                font-size: 12px
        .col-15
            padding-right: 90px
            input,
            textarea
                border: none
                width: 100%
                font-size: 14px
                +padding(13,22)
                color: #c9caca
                overflow: hidden
                margin-bottom: 16px
                background-color: #1e252f
            input::-webkit-input-placeholder, textarea::-webkit-input-placeholder  
                color: #c9caca
                font-size: 14px
                font-family: "PingFang SC", Helvetica, Arial, "Microsoft YaHei", serif
            input:-moz-placeholder, textarea:-moz-placeholder  
                color: #c9caca
                font-size: 14px
                font-family: "PingFang SC", Helvetica, Arial, "Microsoft YaHei", serif
            #footerquestion
                margin-bottom: 16px
            #footerbtn
                font-size: 18px
                color: #fff
                display: inline-block
                +padding(10,36)
                background-color: #10a6e4
        .col-9
            h3 
                margin-bottom: 10px
            p
                font-size: 15px
            a
                color: #10a6e4 
                display: block
                margin-bottom: 40px  


.public-phone
    width: 100%
    +padding(20,n,20,12)
    position: fixed
    z-index: 30
    bottom: 0
    color: #fff
    background-color: rgba(10,10,10,0.5)
    .phone-center
        width: 1240px
        margin: 0 auto
        p
            font-size: 14px
            padding-left: 54px
            background-image: url(../images/call.png)
            background-repeat: no-repeat
            background-position: left center
            background-size: contain
            span
                font-size: 22px 
        .col-11
            font-size: 20px
            text-align: center
            line-height: 45px
        input
            border: none
            width: 100%
            font-size: 14px
            +padding(12,20,12,32)
            border-radius: 10px
            background-image: url(../images/callgrey.png) 
            background-repeat: no-repeat
            background-position: 10px center
            background-size: 20px 24px
        a
            width: 98%
            float: right
            font-size: 17px
            +padding(8,20)           


.nav-container
    +size(140,n)
    color: #fff
    text-align: center
    position: fixed
    z-index: 40
    top: 50%
    right: 22px
    margin-top: -260px
    h2
        font-size: 20px
        font-weight: normal
        +padding(70,n,12,n)
        border-radius: 10px 10px 0 0
        border-bottom: 4px solid #fff
        background-color: #3f9dc7
        background-image: url(../images/service.png)
        background-size: 50px 50px
        background-repeat: no-repeat
        background-position: center 16px
    a
        display: block
        color: #222
        font-size: 18px
        +padding(14,n)
        background-color: #7ecef4
    .parall
        height: 19px
        background-image: url(../images/parall.png)
        background-repeat: no-repeat
        background-position: center top
    .phonenumber
        display: inline-block 
        width: 136px 
        padding-top: 4px
        background-color: #3f9dc7
        +padding(n,8)
        h3
            +padding(4,n)
            font-size: 20px
            border-bottom: 1px solid #fff
    .free
        width: 136px 
        display: inline-block
        padding-bottom: 40px
        background-image: url(../images/decoration.png)
        background-size: contain
        background-repeat: no-repeat
        background-position: center 20px
        span
            display: block
            font-size: 16px
            background-color: #3f9dc7
    // 红包
    .redbag
        display: inline-block
        position: absolute
        top: 68px
        right: 128px
        background: none
        img
            +size(88,109)
